import { onDeactivated, onBeforeUnmount, defineComponent, ref, reactive, computed, watch, createVNode, mergeProps, unref, useSSRContext, onServerPrefetch, onMounted, resolveComponent, resolveDirective, withCtx, createTextVNode, toDisplayString, resolveDynamicComponent, withDirectives, openBlock, createBlock, withKeys, Fragment, renderList, createCommentVNode } from "vue";
import { ssrRenderAttrs, ssrRenderComponent, ssrGetDirectiveProps, ssrRenderAttr, ssrRenderList, ssrInterpolate, ssrRenderClass, ssrRenderVNode } from "vue/server-renderer";
import { u as useHelpCenterStore } from "./helpCenter-683376a8.js";
import { H as HelpCenterFooter } from "./HelpCenterFooter-6efa38aa.js";
import { i as inBrowser, o as onMountedOrActivated, u as useScrollParent, a as unitToPx, e as extend, g as getZIndexStyle, b as useEventListener, s as ssrRegisterHelper, n as numericProp, m as makeStringProp, c as makeNumericProp, d as isHidden, f as useRect, h as getScrollTop, I as IconWrapper, _ as _export_sfc, j as useTrack, k as helpCenterRoute, l as useNativeInfoStore, p as useMainStore, A as AppLayout, H as HelpCenterHeader, S as SearchIcon, q as cdnUrl, r as helpCenterDetailRoute, t as ArrowLeftIcon, v as ArrowRightIcon, w as base64Encode, x as helpSearchResultRoute, y as navNativePage } from "../entry-server.js";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import "./index-59bd15f9.js";
import { u as useDocumentTitle } from "./index-17d7ee25.js";
import "pinia";
import "./CustomerServiceIcon-20eb4cc1.js";
import "qs";
import "js-sha256";
import "@vueuse/core";
import "path";
import "lodash-es";
import "dayjs";
import "dayjs/plugin/utc.js";
import "axios";
import "big.js/big.mjs";
import "uuid";
import "url";
import "fs/promises";
function useVisibilityChange(target, onChange) {
  if (!inBrowser || !window.IntersectionObserver) {
    return;
  }
  const observer = new IntersectionObserver(
    (entries) => {
      onChange(entries[0].intersectionRatio > 0);
    },
    { root: document.body }
  );
  const observe = () => {
    if (target.value) {
      observer.observe(target.value);
    }
  };
  const unobserve = () => {
    if (target.value) {
      observer.unobserve(target.value);
    }
  };
  onDeactivated(unobserve);
  onBeforeUnmount(unobserve);
  onMountedOrActivated(observe);
}
const index = "";
const stickyProps = {
  zIndex: numericProp,
  position: makeStringProp("top"),
  container: Object,
  offsetTop: makeNumericProp(0),
  offsetBottom: makeNumericProp(0)
};
const __default__$1 = defineComponent({
  name: "Sticky",
  props: stickyProps,
  emits: ["scroll", "change"],
  setup(props, {
    emit,
    slots
  }) {
    const root = ref();
    const scrollParent = useScrollParent(root);
    const state = reactive({
      fixed: false,
      width: 0,
      // root width
      height: 0,
      // root height
      transform: 0
    });
    const offset = computed(() => unitToPx(props.position === "top" ? props.offsetTop : props.offsetBottom));
    const rootStyle = computed(() => {
      const {
        fixed,
        height,
        width
      } = state;
      if (fixed) {
        return {
          width: `${width}px`,
          height: `${height}px`
        };
      }
    });
    const stickyStyle = computed(() => {
      if (!state.fixed) {
        return;
      }
      const style = extend(getZIndexStyle(props.zIndex), {
        width: `${state.width}px`,
        height: `${state.height}px`,
        [props.position]: `${offset.value}px`
      });
      if (state.transform) {
        style.transform = `translate3d(0, ${state.transform}px, 0)`;
      }
      return style;
    });
    const emitScroll = (scrollTop) => emit("scroll", {
      scrollTop,
      isFixed: state.fixed
    });
    const onScroll = () => {
      if (!root.value || isHidden(root)) {
        return;
      }
      const {
        container,
        position
      } = props;
      const rootRect = useRect(root);
      const scrollTop = getScrollTop(window);
      state.width = rootRect.width;
      state.height = rootRect.height;
      if (position === "top") {
        if (container) {
          const containerRect = useRect(container);
          const difference = containerRect.bottom - offset.value - state.height;
          state.fixed = offset.value > rootRect.top && containerRect.bottom > 0;
          state.transform = difference < 0 ? difference : 0;
        } else {
          state.fixed = offset.value > rootRect.top;
        }
      } else {
        const {
          clientHeight
        } = document.documentElement;
        if (container) {
          const containerRect = useRect(container);
          const difference = clientHeight - containerRect.top - offset.value - state.height;
          state.fixed = clientHeight - offset.value < rootRect.bottom && clientHeight > containerRect.top;
          state.transform = difference < 0 ? -difference : 0;
        } else {
          state.fixed = clientHeight - offset.value < rootRect.bottom;
        }
      }
      emitScroll(scrollTop);
    };
    watch(() => state.fixed, (value) => emit("change", value));
    useEventListener("scroll", onScroll, {
      target: scrollParent,
      passive: true
    });
    useVisibilityChange(root, onScroll);
    return () => {
      var _a;
      return createVNode("div", {
        "ref": root,
        "style": rootStyle.value
      }, [createVNode("div", {
        "class": {
          "pat-sticky--fixed": state.fixed
        },
        "style": stickyStyle.value
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);
    };
  }
});
const __moduleId = "src/components/global/Sticky/index.tsx";
ssrRegisterHelper(__default__$1, __moduleId);
const ArrowDownIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M6.287 11.172a.9.9 0 0 1 1.18-1.353l.093.08 6.434 6.435L20.43 9.9a.9.9 0 0 1 1.18-.08l.093.08a.9.9 0 0 1 .08 1.181l-.08.092-7.071 7.071a.9.9 0 0 1-1.18.08l-.093-.08-7.071-7.07Z",
  "data-follow-fill": "#444"
}, null)]));
const PhoneCallIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M10.058 8.961c.14.11.266.237.372.379l1.2 1.6c.428.57.372 1.37-.133 1.874l-.424.424a1 1 0 0 0-.214 1.097 7.111 7.111 0 0 0 1.517 2.29 7.11 7.11 0 0 0 2.29 1.517 1 1 0 0 0 1.097-.214l.424-.424a1.434 1.434 0 0 1 1.874-.133l1.6 1.2a2 2 0 0 1 .028 3.178l-.571.445a5.224 5.224 0 0 1-5.999.291 21.18 21.18 0 0 1-3.674-2.93 21.188 21.188 0 0 1-2.93-3.673 5.224 5.224 0 0 1 .292-5.999l.445-.57a2 2 0 0 1 2.806-.352Zm-1.56 1.206-.062.066-.445.571a3.724 3.724 0 0 0-.208 4.276 19.684 19.684 0 0 0 2.723 3.415 19.685 19.685 0 0 0 3.415 2.723c1.266.8 2.882.76 4.104-.083l.172-.126.57-.444a.5.5 0 0 0 .06-.734l-.066-.06-1.555-1.166-.383.383a2.5 2.5 0 0 1-2.563.603l-.177-.067a8.61 8.61 0 0 1-2.767-1.839 8.607 8.607 0 0 1-1.839-2.767 2.5 2.5 0 0 1 .407-2.601l.128-.14.383-.383L9.23 10.24a.507.507 0 0 0-.043-.05l-.05-.045a.5.5 0 0 0-.64.022Zm6.726-.647a5.906 5.906 0 0 1 4.227 4.144.75.75 0 0 1-1.446.399 4.406 4.406 0 0 0-3.151-3.09.75.75 0 0 1 .37-1.453Zm-.108-3.51.101.009a9.335 9.335 0 0 1 7.752 7.686.75.75 0 1 1-1.48.244 7.835 7.835 0 0 0-6.503-6.448.75.75 0 0 1 .13-1.491Z",
  "data-follow-fill": "#444"
}, null)]));
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "FooterContact",
  __ssrInlineRender: true,
  setup(__props) {
    ref();
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "footer-contact content2" }, _attrs))} data-v-39f8212e><p class="txt-divider" data-v-39f8212e><span data-v-39f8212e>or</span></p><p class="phone-txt" data-v-39f8212e>`);
      _push(ssrRenderComponent(unref(PhoneCallIcon), {
        class: "phone-icon",
        width: 28
      }, null, _parent));
      _push(`<span tabindex="0" class="phone-num" data-v-39f8212e>+1 833 919 4380</span><button class="copy-btn" data-v-39f8212e>Copy</button></p><p class="service-time" data-v-39f8212e><span data-v-39f8212e>10 : 00 - 18 : 00 (UTC-5)</span><span data-v-39f8212e>7 : 00 - 15 : 00 (UTC-8)</span></p></div>`);
    };
  }
});
const FooterContact_vue_vue_type_style_index_0_scoped_39f8212e_lang = "";
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/FooterContact.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const FooterContact = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-39f8212e"]]);
const __default__ = defineComponent({
  name: "HelpCenter",
  components: {
    HelpCenterFooter,
    HelpCenterHeader,
    Sticky: __default__$1,
    SearchIcon,
    ArrowDownIcon,
    ArrowLeftIcon,
    ArrowRightIcon,
    AppLayout,
    FooterContact
  }
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  __ssrInlineRender: true,
  setup(__props) {
    useTrack();
    const trackPageName = computed(() => {
      var _a;
      const name = ((_a = helpCenterRoute.meta) == null ? void 0 : _a.trackPageName) || "";
      return name ? name + "_" : "";
    });
    const helpCenterStore = useHelpCenterStore();
    const nativeInfoStore = useNativeInfoStore();
    const mainStore = useMainStore();
    mainStore.getABTestExperiment;
    const router = useRouter();
    const i18n = useI18n();
    const t = i18n.t;
    const helpCenterList = computed(() => helpCenterStore.helpCenterList);
    const activeIndex = ref(-1);
    const HCSecondListRefs = ref([]);
    const HCHeaderRef = ref();
    const isARLang = computed(() => ["ar", "he"].includes(i18n.locale.value));
    const searchStyle = computed(() => {
      return isARLang.value ? { right: "12px" } : { left: "12px" };
    });
    const showFooterContact = computed(() => {
      const isUSSite = mainStore.siteAbb === "us";
      return isUSSite;
    });
    const stickyStyle = (scrollTop) => {
      const style = {};
      const maxDistance = Math.min(scrollTop, 40);
      if (scrollTop >= 0) {
        Object.assign(style, {
          marginInlineStart: `${16 + maxDistance}px`,
          width: `calc(100% - ${32 + maxDistance}px)`
        });
      }
      return style;
    };
    function onExpandSecondTitle(title, index2) {
      const beforeIndex = activeIndex.value;
      if (activeIndex.value !== index2) {
        activeIndex.value = index2;
      } else {
        activeIndex.value = -1;
      }
      const clickEle = HCSecondListRefs.value[index2];
      const beforeEle = HCSecondListRefs.value[beforeIndex];
      if (beforeEle) {
        beforeEle.style.height = "0px";
      }
      if (clickEle && activeIndex.value !== -1) {
        clickEle.style.height = "auto";
        const clientHeight = clickEle.clientHeight;
        clickEle.style.height = "0px";
        clickEle.style.opacity = "1";
        setTimeout(() => {
          clickEle.style.height = `${clientHeight}px`;
        });
      }
    }
    async function onUpdateHelpCenterList() {
      await helpCenterStore.getHelpCenterListData();
    }
    function goToSearch() {
      if (nativeInfoStore.isFromApp) {
        const origin = window.location.origin;
        const appLink = "patpat://?action=webpage&is_hidden_navigation_bar=1&isEnCode=true&url=" + base64Encode(`${origin}${helpSearchResultRoute.path}?platform=app`);
        navNativePage({ url: appLink }, false);
      } else {
        router.push({ name: helpSearchResultRoute.name, params: { lang: i18n.locale.value } });
      }
    }
    useDocumentTitle(t("common.faq_support") + " | " + mainStore.seoPatPatTdk);
    onServerPrefetch(onUpdateHelpCenterList);
    onMounted(() => {
      if (!helpCenterList.value.length) {
        onUpdateHelpCenterList();
      }
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_PatLink = resolveComponent("PatLink");
      const _directive_track = resolveDirective("track");
      _push(ssrRenderComponent(AppLayout, mergeProps({ class: "help-center" }, _attrs), {
        default: withCtx(({ scrollTop }, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(ssrRenderComponent(HelpCenterHeader, {
              ref_key: "HCHeaderRef",
              ref: HCHeaderRef,
              "left-btn-event-name": trackPageName.value + "back",
              title: unref(t)("helpCenter.Customer_Service")
            }, null, _parent2, _scopeId));
            _push2(`<label${ssrRenderAttrs(mergeProps({
              for: "hc-search-input",
              class: "hc-search",
              style: stickyStyle(scrollTop)
            }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "search_bar", eventName: "search_bar" }, void 0, {
              click: true,
              exposure: true
            })))} data-v-dc1c471d${_scopeId}>`);
            _push2(ssrRenderComponent(unref(SearchIcon), {
              class: "search-icon",
              style: searchStyle.value,
              width: 24
            }, null, _parent2, _scopeId));
            _push2(`<input id="hc-search-input" type="text" class="search-input" disabled${ssrRenderAttr("placeholder", unref(t)("account.help.question"))} data-v-dc1c471d${_scopeId}></label><ul class="hc-list" data-v-dc1c471d${_scopeId}><!--[-->`);
            ssrRenderList(helpCenterList.value, (firstTitle, index2) => {
              _push2(`<li data-v-dc1c471d${_scopeId}><div${ssrRenderAttrs(mergeProps({
                role: "button",
                class: "hc-list-item",
                tabindex: "0"
              }, ssrGetDirectiveProps(_ctx, _directive_track, {
                pId: trackPageName.value + `level_one_question-${String(index2 + 1).padStart(3, "0")}`,
                eventName: "level_one_question"
              }, void 0, {
                click: true,
                exposure: true
              })))} data-v-dc1c471d${_scopeId}><img${ssrRenderAttr("src", unref(cdnUrl)({ url: firstTitle.icon }))}${ssrRenderAttr("alt", firstTitle.title)} role="none" width="28" height="28" class="hc-list-item-icon" data-v-dc1c471d${_scopeId}><span class="hc-list-item-title content2-bold ellipsis" data-v-dc1c471d${_scopeId}>${ssrInterpolate(firstTitle.title)}</span>`);
              _push2(ssrRenderComponent(unref(ArrowDownIcon), {
                class: ["hc-list-item-expand", { expanded: activeIndex.value === index2 }],
                width: 20,
                height: 22,
                color: "#757575"
              }, null, _parent2, _scopeId));
              _push2(`</div><ul class="${ssrRenderClass([`hc-second-list-${index2}`, "hc-second-list"])}" data-v-dc1c471d${_scopeId}><!--[-->`);
              ssrRenderList(firstTitle.children, (secondTitle, idx) => {
                _push2(`<li class="hc-list-item hc-second-list-item" data-v-dc1c471d${_scopeId}>`);
                _push2(ssrRenderComponent(_component_PatLink, mergeProps({
                  class: "hc-list-item-title content2 hc-second-list-item-title",
                  to: {
                    name: unref(helpCenterDetailRoute).name,
                    params: { detailTitle: secondTitle.url_name, detailsId: secondTitle.id }
                  },
                  "is-hidden-navigation-bar": true
                }, ssrGetDirectiveProps(_ctx, _directive_track, {
                  pId: trackPageName.value + `level_two_question-${String(idx + 1).padStart(3, "0")}`,
                  eventName: "level_two_question"
                }, void 0, {
                  click: true,
                  exposure: true
                })), {
                  default: withCtx((_, _push3, _parent3, _scopeId2) => {
                    if (_push3) {
                      _push3(`${ssrInterpolate(secondTitle.title)}`);
                    } else {
                      return [
                        createTextVNode(toDisplayString(secondTitle.title), 1)
                      ];
                    }
                  }),
                  _: 2
                }, _parent2, _scopeId));
                ssrRenderVNode(_push2, createVNode(resolveDynamicComponent(isARLang.value ? unref(ArrowLeftIcon) : unref(ArrowRightIcon)), {
                  width: 20,
                  height: 20,
                  color: "#757575"
                }, null), _parent2, _scopeId);
                _push2(`</li>`);
              });
              _push2(`<!--]--></ul></li>`);
            });
            _push2(`<!--]--></ul>`);
            _push2(ssrRenderComponent(HelpCenterFooter, { "ticket-record": true }, null, _parent2, _scopeId));
            if (showFooterContact.value) {
              _push2(ssrRenderComponent(FooterContact, null, null, _parent2, _scopeId));
            } else {
              _push2(`<!---->`);
            }
          } else {
            return [
              createVNode(HelpCenterHeader, {
                ref_key: "HCHeaderRef",
                ref: HCHeaderRef,
                "left-btn-event-name": trackPageName.value + "back",
                title: unref(t)("helpCenter.Customer_Service")
              }, null, 8, ["left-btn-event-name", "title"]),
              withDirectives((openBlock(), createBlock("label", {
                for: "hc-search-input",
                class: "hc-search",
                style: stickyStyle(scrollTop),
                onClick: goToSearch,
                onKeydown: withKeys(goToSearch, ["enter"])
              }, [
                createVNode(unref(SearchIcon), {
                  class: "search-icon",
                  style: searchStyle.value,
                  width: 24
                }, null, 8, ["style"]),
                createVNode("input", {
                  id: "hc-search-input",
                  type: "text",
                  class: "search-input",
                  disabled: "",
                  placeholder: unref(t)("account.help.question")
                }, null, 8, ["placeholder"])
              ], 44, ["onKeydown"])), [
                [
                  _directive_track,
                  { pId: trackPageName.value + "search_bar", eventName: "search_bar" },
                  void 0,
                  {
                    click: true,
                    exposure: true
                  }
                ]
              ]),
              createVNode("ul", { class: "hc-list" }, [
                (openBlock(true), createBlock(Fragment, null, renderList(helpCenterList.value, (firstTitle, index2) => {
                  return openBlock(), createBlock("li", { key: index2 }, [
                    withDirectives((openBlock(), createBlock("div", {
                      role: "button",
                      class: "hc-list-item",
                      tabindex: "0",
                      onClick: ($event) => onExpandSecondTitle(firstTitle, index2),
                      onKeydown: withKeys(($event) => onExpandSecondTitle(firstTitle, index2), ["enter"])
                    }, [
                      createVNode("img", {
                        src: unref(cdnUrl)({ url: firstTitle.icon }),
                        alt: firstTitle.title,
                        role: "none",
                        width: "28",
                        height: "28",
                        class: "hc-list-item-icon"
                      }, null, 8, ["src", "alt"]),
                      createVNode("span", { class: "hc-list-item-title content2-bold ellipsis" }, toDisplayString(firstTitle.title), 1),
                      createVNode(unref(ArrowDownIcon), {
                        class: ["hc-list-item-expand", { expanded: activeIndex.value === index2 }],
                        width: 20,
                        height: 22,
                        color: "#757575"
                      }, null, 8, ["class"])
                    ], 40, ["onClick", "onKeydown"])), [
                      [
                        _directive_track,
                        {
                          pId: trackPageName.value + `level_one_question-${String(index2 + 1).padStart(3, "0")}`,
                          eventName: "level_one_question"
                        },
                        void 0,
                        {
                          click: true,
                          exposure: true
                        }
                      ]
                    ]),
                    createVNode("ul", {
                      ref_for: true,
                      ref_key: "HCSecondListRefs",
                      ref: HCSecondListRefs,
                      class: ["hc-second-list", `hc-second-list-${index2}`]
                    }, [
                      (openBlock(true), createBlock(Fragment, null, renderList(firstTitle.children, (secondTitle, idx) => {
                        return openBlock(), createBlock("li", {
                          key: idx,
                          class: "hc-list-item hc-second-list-item"
                        }, [
                          withDirectives((openBlock(), createBlock(_component_PatLink, {
                            class: "hc-list-item-title content2 hc-second-list-item-title",
                            to: {
                              name: unref(helpCenterDetailRoute).name,
                              params: { detailTitle: secondTitle.url_name, detailsId: secondTitle.id }
                            },
                            "is-hidden-navigation-bar": true
                          }, {
                            default: withCtx(() => [
                              createTextVNode(toDisplayString(secondTitle.title), 1)
                            ]),
                            _: 2
                          }, 1032, ["to"])), [
                            [
                              _directive_track,
                              {
                                pId: trackPageName.value + `level_two_question-${String(idx + 1).padStart(3, "0")}`,
                                eventName: "level_two_question"
                              },
                              void 0,
                              {
                                click: true,
                                exposure: true
                              }
                            ]
                          ]),
                          (openBlock(), createBlock(resolveDynamicComponent(isARLang.value ? unref(ArrowLeftIcon) : unref(ArrowRightIcon)), {
                            width: 20,
                            height: 20,
                            color: "#757575"
                          }))
                        ]);
                      }), 128))
                    ], 2)
                  ]);
                }), 128))
              ]),
              createVNode(HelpCenterFooter, { "ticket-record": true }),
              showFooterContact.value ? (openBlock(), createBlock(FooterContact, { key: 0 })) : createCommentVNode("", true)
            ];
          }
        }),
        _: 1
      }, _parent));
    };
  }
});
const HelpCenter_vue_vue_type_style_index_0_scoped_dc1c471d_lang = "";
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/HelpCenter.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const HelpCenter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dc1c471d"]]);
export {
  HelpCenter as default
};
